<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

<!DOCTYPE html>
<html lang="zh">
    <title>角色列表</title>

    <%@include file="common/head.jsp" %>
    <style>
        .tree li {
            list-style-type: none;
            cursor: pointer;
        }

        table tbody tr:nth-child(odd) {
            background: #F4F4F4;
        }

    </style>
    </head>
    <link rel="stylesheet" href="ztree/zTreeStyle.css"/>
    <script type="text/javascript" src="ztree/jquery.ztree.all-3.5.min.js"></script>
    <script type="text/javascript" src="script/my-role.js" charset="UTF-8"></script>

    <script>
        $(function () {

            // 为分页准备全局数据
            window.pageNum = 1;
            window.pageSize = 8;
            window.keyword = "";

            // 调用分页函数
            generatePage()

            // 给搜索按钮设置单击事件，获取keyword
            $("#searchBtn").click(function () {

                // 获取keyword
                window.keyword = $("#keywordInput").val();

                // 调用分页函数刷新页面
                generatePage();

            });

            // 点击新增按钮打开模块框
            $("#showModelBtn").click(function () {
                $("#addModal").modal("show");
            });

            // 给模块框的保存按钮绑定单击事件
            $("#saveRoleBtn").click(function () {

                // 用后代选择器获取roleName
                let roleName = $("#addModal [name=roleName]").val();

                // 发送ajax请求
                $.ajax({
                    "url": "role/do/addRole.json",
                    "type": "post",
                    "data": {"roleName": roleName},
                    "dataType": "json",
                    "success": function (response) {
                        let result = response.result;
                        if (result === "SUCCESS") {
                            layer.msg("操作成功");
                        } else if (result === "FAILED") {
                            layer.msg("操作失败！" + response.message);
                        }

                        // 加载分页数据，直接到最后一页
                        window.pageNum = 999999; // 溢出
                        generatePage();
                    },
                    "error": function (response) {
                        layer.msg(response.status + " " + response.statusText)
                    }
                });

                // 关闭模块框
                $("#addModal").modal("hide");

                // 清理模块框的数据
                $("#addModal [name=roleName]").val("");
            });

            // 使用 jQuery 对象的 on()函数可以解决上面问题
            // 1.首先找到所有“动态生成”的元素所附着的“静态”元素
            // 2.on()函数的第一个参数是事件类型
            // 3.on()函数的第二个参数是找到真正要绑定事件的元素的选择器
            // 4.on()函数的第三个参数是事件的响应函数
            $("#rolePageBody").on("click", ".toUpdateModalBtn", function () {

                // 打开模块框
                $("#updateRoleModal").modal("show");

                // 获取需要回显的数据
                let roleName = $(this).parent().prev().text();

                // 把数据回显到模块框中
                $("#input_update_role").attr("placeholder", roleName);

                // 获取id，这个id被巧妙的放在btn的id上
                window.roleId = this.id;

            });

            // 给模块框的提交按钮绑定单击事件
            $("#updateRoleBtn").click(function () {

                // 获取修改后的roleName
                let roleName = $("#input_update_role").val();

                // 发送ajax请求
                $.ajax({
                    "url": "role/do/updateRole.json",
                    "type": "post",
                    "data": {
                        "roleName": roleName,
                        "id": window.roleId
                    },
                    "dataType": "json",
                    "success": function (response) {

                        let result = response.result;

                        if (result === "SUCCESS") {

                            layer.msg("操作成功");

                            // 设置keyword，直接跳转到被修改的role
                            window.keyword = roleName;

                            // 完成分页
                            generatePage();

                            // keyword回显
                            $("#keywordInput").val(keyword);

                        } else if (result === "FAILED") {

                            layer.msg("操作失败！" + response.message);
                        }
                    },
                    "error": function (response) {
                        layer.msg(response.status + " " + response.statusText)
                    }
                });

                // 关闭模块框
                $("#updateRoleModal").modal("hide");

                // 清理模块框的数据
                $("#updateRoleModal [name=roleName]").val("");
            });

            // 给删除模态框的按钮绑定事件
            $("#delRoleBtn").click(function () {

                let roleIdList = JSON.stringify(window.roleIdList);

                $.ajax({
                    "url": "role/do/delRole.json",
                    "type": "post",
                    "data": roleIdList,
                    "contentType": "application/json;charset=UTF-8",
                    "dataType": "json",
                    "success": function (response) {
                        let result = response.result;
                        if (result === "SUCCESS") {

                            layer.msg("操作成功");
                            generatePage();

                        } else if (result === "FAILED") {

                            layer.msg("操作失败！" + response.message);
                        }
                    },
                    "error": function (response) {
                        layer.msg(response.status + " " + response.statusText)
                    }
                });
                $("#deleteRoleModal").modal("hide");
            });

            // 给单条删除按钮绑定单击事件
            $("#rolePageBody").on("click", ".toDeleteMadel", function () {
                let roleName = $(this).parent().prev().text();
                let roleList = [{
                    "roleId": this.id,
                    "roleName": roleName
                }];
                openDeleteMadel(roleList);
            });

            // 给全选box绑定事件
            $("#mainBox_role").click(function () {

                // 获取自身状态
                let status = this.checked;

                // 用这个状态来决定其他box
                $(".checkbox_role").prop("checked", status);

                // 反向控制
                $("#rolePageBody").on("click", ".checkbox_role", function () {

                    // 获取当前已经被勾选的盒子的数量
                    let checkedCount = $(".checkbox_role:checked").length;

                    // 获取全部数量
                    let allBoxCount = $(".checkbox_role").length;

                    // 当单个的box全部被选中时
                    $("#mainBox_role").prop("checked", checkedCount === allBoxCount);

                });
            });

            // 给批量删除绑定事件
            $("#batchDelRole").click(function () {
                let roleList = [];
                $(".checkbox_role:checked").each(function () {
                    let roleId = this.id;
                    let roleName = $(this).parent().next().text();
                    roleList.push({
                        "roleId": roleId,
                        "roleName": roleName
                    })
                })
                if (roleList.length === 0) {
                    layer.msg("请先勾选数据");
                    return;
                }
                openDeleteMadel(roleList);
            });

            // 给分配权限按钮绑定单击响应函数
            $("#rolePageBody").on("click", ".checkBoxBtn_role", function () {
                window.roleId = this.id;
                // 打开模态框
                $("#assignModal").modal("show");
                // 在模态框中装载树 Auth 的形结构数据
                fillAuthTree();
            });

            // 给分配权限模态框中的“分配”按钮绑定单击响应函数
            $("#assignBtn").click(function () {
                // ①收集树形结构的各个节点中被勾选的节点
                // [1]声明一个专门的数组存放 id
                let authIdArray = [];
                // [2]获取 zTreeObj 对象
                let zTreeObj = $.fn.zTree.getZTreeObj("authTreeDemo");
                // [3]获取全部被勾选的节点
                let checkedNodes = zTreeObj.getCheckedNodes();
                // [4]遍历 checkedNodes
                for (let i = 0; i < checkedNodes.length; i++) {
                    let checkedNode = checkedNodes[i];
                    let authId = checkedNode.id;
                    authIdArray.push(authId);
                }
                // ②发送请求执行分配
                let requestBody = {
                    "authIdArray": authIdArray,
                    // 为了服务器端 handler 方法能够统一使用 List<Integer>方式接收数据，roleId 也存入数组
                    "roleId": [window.roleId]
                };
                requestBody = JSON.stringify(requestBody);
                $.ajax({
                    "url": "assign/do/assignAuthToRole.json",
                    "type": "post",
                    "data": requestBody,
                    "contentType": "application/json;charset=UTF-8",
                    "dataType": "json",
                    "success": function (response) {
                        let result = response.result;
                        if (result === "SUCCESS") {
                            layer.msg("操作成功！");
                        }
                        if (result === "FAILED") {
                            layer.msg("操作失败！" + response.message);
                        }
                    },
                    "error": function (response) {
                        layer.msg(response.status + " " + response.statusText);
                    }
                });
                $("#assignModal").modal("hide");
            });
        });

    </script>
    <body>

        <%@include file="common/nav.jsp" %>

        <div class="container-fluid">
            <div class="row">

                <%@include file="common/side-bar.jsp" %>

                <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title"><i class="glyphicon glyphicon-th"></i>角色列表</h3>
                        </div>
                        <div class="panel-body">
                            <form class="form-inline" role="form" style="float:left;">
                                <div class="form-group has-feedback">
                                    <div class="input-group">
                                        <div class="input-group-addon">查询条件</div>
                                        <input id="keywordInput" class="form-control has-success" type="text"
                                               placeholder="请输入查询条件" autofocus>
                                    </div>
                                </div>
                                <button type="button" id="searchBtn" class="btn btn-warning"><i
                                        class="glyphicon glyphicon-search"></i>
                                    查询
                                </button>
                            </form>
                            <button id="batchDelRole" type="button" class="btn btn-danger"
                                    style="float:right;margin-left:10px;"><i
                                    class=" glyphicon glyphicon-remove"></i>删除
                            </button>
                            <button type="button" id="showModelBtn" class="btn btn-primary" style="float:right;">
                                <i class="glyphicon glyphicon-plus"></i>
                                新增
                            </button>
                            <br>
                            <hr style="clear:both;">
                            <div class="table-responsive">
                                <table class="table  table-bordered">
                                    <thead>
                                    <tr>
                                        <th width="30">#</th>
                                        <th width="30"><input id="mainBox_role" type="checkbox"></th>
                                        <th>名称</th>
                                        <th width="100">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody id="rolePageBody"></tbody>
                                    <tfoot>
                                    <tr>
                                        <td id="td_pagination" colspan="6" align="center">
                                            <!-- 这里显示分页 -->
                                            <div id="Pagination" class="pagination"></div>
                                        </td>
                                    </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <%@include file="modal-role-add.jsp" %>
        <%@include file="modal-role-update.jsp" %>
        <%@include file="modal-role-delete.jsp" %>
        <%@include file="modal-role-assign-auth.jsp" %>
    </body>
</html>
